<template>
  <div class="add">
    <BaseDialog
      :title="$t('新增')"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="90"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup lang="tsx">
import { ref, computed, onMounted } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import { getSubZhEn, columnFilters } from "@/utils/mUtils.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        formLayout: "el-row-column",
        content: [
          {
            content: [
              {
                label: "出口单类型",
                prop: "exportOrderType",
                type: "label_select",
                placeholder: "请选择出口单类型",
                options: [
                  { label: "自出", value: "0" },
                  { label: "转单", value: "1" },
                ],
              },
              {
                label: "SO号",
                prop: "soNo",
                type: "remote_select",
                placeholder: "请选择SO号",
                params: {
                  searchKey: "keyword",
                  keyValue: "soNo",
                  name: "soNo",
                  abbreviation: "bookingNo",
                  showCustomizedOption: true,
                  fixedParams: {
                    isContainSo: true,
                  },
                  displayKey: {
                    customerNameZh: "customerNameZh",
                    lineName: "lineName",
                    lineDetailCode: "lineDetailCode",
                    providerName: "providerName",
                    loadingPortName: "loadingPortName",
                    deliveryPortName: "deliveryPortName",
                  },
                },
                paramsKey: {
                  customerCode: "customerCode",
                  providerName: "providerName",
                  providerCode: "providerCode",
                  vesselName: "vesselName",
                  voyageNo: "voyageNo",
                  loadingPortCode: "loadingPortCode",
                  loadingPortName: "loadingPortName",
                  dischargePortCode: "dischargePortCode",
                  dischargePortName: "dischargePortName",
                  deliveryPortCode: "deliveryPortCode",
                  deliveryPortName: "deliveryPortName",
                  estimatedTimeDeparture: "estimatedTimeDeparture",
                  actualTimeDeparture: "actualTimeDeparture",
                  actualTimeArrivalDischarge: "actualTimeArrivalDischarge",
                  estimatedTimeArrivalDischarge:
                    "estimatedTimeArrivalDischarge",
                  actualTimeArrivalDelivery: "actualTimeArrivalDelivery",
                  estimatedTimeArrivalDelivery: "estimatedTimeArrivalDelivery",
                  goodsTypeName: "goodsTypeName",
                  goodsTypeCode: "goodsTypeCode",
                  containerTypeName: "containerTypeName",
                  containerTypeCode: "containerTypeCode",
                  customsClosingTime: "customsClosingTime",
                },
                apiModule: api.default.oceanFreight.bookingManagement.list,
              },
              {
                label: "客户",
                prop: "customerCode",
              },
              {
                label: "货物类型",
                name: "goodsTypeName",
              },
              {
                label: "件数",
                prop: "pcs",
              },
              {
                label: "毛重",
                prop: "totalGrossWeight",
              },
              {
                label: "体积",
                prop: "totalVolume",
              },
            ],
            span: 8,
          },
          {
            content: [
              {
                label: "船公司",
                prop: "providerName",
              },
              {
                label: "船名/航次",
                options: [
                  {
                    value: "vesselName",
                  },
                  {
                    value: "voyageNo",
                  },
                ],
              },
              {
                label: "起运港",
                prop: "loadingPortCode",
                name: "loadingPortName",
              },
              {
                label: "卸货港",
                prop: "dischargePortCode",
                name: "dischargePortName",
              },
              {
                label: "目的港",
                prop: "deliveryPortCode",
                name: "deliveryPortName",
              },
            ],
            span: 8,
          },
          {
            content: [
              {
                label: "L/F",
                name: "containerTypeName",
              },
              {
                label: "ETD",
                prop: "estimatedTimeDeparture",
              },
              {
                label: "ETA",
                prop: "estimatedTimeArrivalDelivery",
              },
              {
                label: "截关时间",
                prop: "customsClosingTime",
              },
            ],
            span: 8,
          },
        ],
      },
    ],
  },
]);
const rules = ref({
  exportOrderType: [
    {
      required: true,
      message: i18n.global.t("请选择出口单类型"),
      trigger: ["blur", "change"],
    },
  ],
});
const saveBtnLoading = ref(false);
onMounted(() => {});
const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  saveBtnLoading.value = true;
  api.default.oceanFreight.seaFreightExportOrder
    .add({
      ...parmas,
    })
    .then(() => {
      ElMessage.success(i18n.global.t("新增成功"));
      innerVisible.value = false;
      saveBtnLoading.value = false;
      emits("onSubmit");
    })
    .catch(() => {
      saveBtnLoading.value = false;
    });
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
